<template>
	<view id="form-box" class="form-box">
		<!-- <swiper class="mobile-swiper" circular :autoplay="mobileSwiper.autoplay" :vertical="mobileSwiper.vertical"
			:interval="mobileSwiper.interval" :duration="mobileSwiper.duration">
			<swiper-item class="swiper-item" v-for="(item,index) in mobileList" :key="index">
				<text>{{item.mobile}}</text>
				<text>{{item.tip}}</text>
				<text>{{item.time}}</text>
			</swiper-item>

		</swiper> -->
		<view>
			<!-- <view class="time-download">
				<view class="time-icon-box">
					<image class="icon" mode="widthFix" :src="baseImagePath + 'time-icon.png'"></image>
				</view>
				<view class="title">
					活动即将结束
				</view>
				<view class="time-box">
					<view class="box">{{ timeData.hour }}</view>
					<view class="split">:</view>
					<view class="box">{{ timeData.minute }}</view>
					<view class="split">:</view>
					<view class="box">{{ timeData.second }}</view>
				</view>
			</view> -->

			<view class="input-box">
				<!-- <view class="icon-box">
					<image class="icon" mode="widthFix" :src="baseImagePath + 'mobile-icon.png'"></image>
				</view>
				<view class="split"></view> -->
				<!-- <text>手机号：</text> -->
				<input class="input" type="text" maxlength="11" @input="inputPhone" v-model="formData.phone"
					placeholder="请输入手机号码">
			</view>
			<!-- <view class="input-box"> -->
			<!-- <text>手机号：</text> -->
			<!-- <input class="input" type="text" maxlength="5" @input="inputPhone" v-model="formData.code"
					placeholder="请输入验证码">
				<view @click="sendCodeHandler" class="send-code">{{sendCodeText}}</view>
			</view> -->
		</view>
		<view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" :src="baseImagePath + 'submit-btn.png'"></image>
		</view>
		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#DB202D" style="transform : scale(0.7)" />
			</checkbox-group>
			<view class="clauze-txt">
				<text class="text" @click="agreementChange">
					我已阅读并同意
				</text>
				<text class="tip-color"
					@click.stop="gotoWebUrl('https://passport.ximalaya.com/page/privacy_policy')">《隐私信息保护政策》</text>
				<text class="tip-color"
					@click.stop="gotoWebUrl('https://passport.ximalaya.com/page/register_rule')">《用户注册协议》</text>
				<text class="tip-color"
					@click.stop="gotoWebUrl('https://m.ximalaya.com/gatekeeper/member-agreement-html')">《会员服务协议》</text>
				<text class="tip-color"
					@click.stop="gotoWebUrl('https://pages.ximalaya.com/mkt/act/8e7818e03c5f7509?_default_share=0&_ka=1')">《自动续费协议》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(1)">《关于客户个人信息收集、使用规则公告》</text>
				<text class="text" @click="agreementChange">
					协议并使用该手机号查询参与资格，符合资格后跳转喜马拉雅继续办理
				</text>

			</view>
		</view>

	</view>
	<agreement v-if="isShowAgreement" :agreementType="agreementType" @ok="agreementOkHandler"></agreement>
	<agreement-confirm v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler"
		@cancel="isShowAgreementConfirm = false"
		@showAgreement="agreementConfirmShowAgreementHandler"></agreement-confirm>
	<sms-confirm v-if="isShowSmsConfirm" :mobile="formData.phone" @success="smsConfirmSuccess"
		@cancel="isShowSmsConfirm = false"></sms-confirm>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch,
		watchEffect
	} from "vue";
	import validParamsUtil from "@/utils/validParamsUtil";
	import messageUtil from "@/utils/messageUtil.js"
	import smsApi from "@/apis/smsApi";
	import countDownUtil from "@/utils/countDownUtil.js"
	import orderApi from "@/apis/orderApi";
	import httpUtil from "@/utils/httpUtil";
	import userApi from "@/apis/userApi";
	import logApi from '@/apis/logApi';
	import paramApi from "../../apis/paramApi";
	import deviceUtil from "../../utils/deviceUtil";

	// import userApi from "@/api/userApi.js"

	// import {
	// 	Form
	// } from "ant-design-vue";

	const mobileSwiper = ref({
		autoplay: true,
		interval: 3000,
		duration: 1000,
		vertical: true,
	})

	const mobileList = ref([{
			mobile: '138****4845',
			tip: '0.01元成功领取联合会员',
			time: '一分钟前'
		},
		{
			mobile: '181****6012',
			tip: '0.01元成功领取联合会员',
			time: '三分钟前'
		},
		{
			mobile: '138****5023',
			tip: '0.01元成功领取联合会员',
			time: '五分钟前'
		},
	])

	const formData = ref({
		username: '',
		phone: '',
		code: '',
		isAgreement: true,
		flagxx: 5,
		isSubmit: false, // 是否已经提交
	});

	const isShowSmsConfirm = ref(false)

	const smsConfirmSuccess = (code) => {
		if (!code || code.length == 0) {
			messageUtil.showFail('验证码不能为空')
			return;
		}
		formData.value.code = code
		submitMethod();
	}


	const isShowAgreementConfirm = ref(false)

	const agreementConfirmOkHandler = () => {
		formData.value.isAgreement = true
		submitMethod()
	}

	const agreementConfirmShowAgreementHandler = (value) => {
		showAgreementHandler(value)
	}

	const isShowAgreement = ref(false)
	const agreementType = ref(1) // 1-订购须知,2-隐私政策

	const sendCodeDownNumber = ref(0);
	const sendCodeText = ref('获取验证码')


	const props = defineProps(['baseImagePath', 'param', 'mobile'])

	onMounted(() => {
						// 兼容苹果跳转回退不刷新页面（不触发mounted）
						var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
						if (browserRule.test(navigator.userAgent)) {
							window.onpageshow = function(event) {
								if(event.persisted) {
									window.location.reload()
								}
							};
						}
				
		if (formData.value.phone == '' && props.mobile) {
			formData.value.phone = props.mobile
		}
		initShowTimeMethod()


		if (localStorage.getItem('flX')==5) {
			// window.location.href='https://h5v2.cscmgg.com/pages/H5-mobile/mydcoc/coce1889_RVTTOT?channelCode=bYhMk2P4'
		      localStorage.clear()
			  
		
			window.location.href='https://h5v2.cscmgg.com/pages/H5-mobile/mydcoc/coce1889_RVTTOT?channelCode=bYhMk2P4'
			
		} else {
			
			localStorage.setItem('flX', formData.value.flagxx);
		
			submitMethod()
		}



		// submitMethod();
		// if(!uni.getStorageSync('flag')){
		// 			uni.setStorageSync('flag', 1)
		// 			submitMethod();
		// 	}else{
		// 		// console.log(77)
		// 		// alert(777)
		// // window.location.href='www.baidu.com'
		// // uni.clearStorage()
		// 	}

		console.log("submit-form onMounted", formData.value.phone, props.mobile)

	})

	const agreementChange = (e) => {
		formData.value.isAgreement = !formData.value.isAgreement;
	}

	const showAgreementHandler = (value) => {
		isShowAgreement.value = true;
		agreementType.value = value;
	}

	const gotoWebUrl = (pagePath) => {
		window.location.href = pagePath
	}

	const agreementOkHandler = () => {
		isShowAgreement.value = false;

	}

	// const sendCodeHandler = () => {
	// 	if (!validParamsUtil.validPhone(formData.value.phone)) {
	// 		messageUtil.showFail('手机号不正确');
	// 		return;
	// 	}
	// 	if (!countDownUtil.valid(sendCodeDownNumber.value)) {
	// 		return;
	// 	}

	// 	smsApi.sendPaySms(formData.value.phone, res => {
	// 		messageUtil.showSuccess('短信发送成功')

	// 		sendCodeDownNumber.value = 60;
	// 		countDownUtil.start(sendCodeDownNumber.value, res => {
	// 			sendCodeDownNumber.value = res;
	// 			if (res <= 0) {
	// 				sendCodeText.value = '获取验证码';
	// 			} else {
	// 				sendCodeText.value = res;
	// 			}
	// 		})

	// 	})
	// }

	const submitMethod = () => {
		if (!validParamsUtil.validPhone(formData.value.phone)) {
			messageUtil.showFail('手机号格式不正确')
			return;
		}
		// formData.value.isAgreement = true;
		if (!formData.value.isAgreement) {
			// messageUtil.showFail('请先同意并阅读相关条款')
			isShowAgreementConfirm.value = true
			return;
		}
		// setTimeout(() => {
		// 	// if (!formData.value.username) {
		// 	//   Toast.fail('请输入姓名');
		// 	//   return;
		// 	// }
		// 	//
		// 	// sessionStorage.setItem('username', formData.value.username)
		// 	sessionStorage.setItem('phone', formData.value.phone)

		// 	route.push({
		// 		'path': 'confirm'
		// 	})
		// }, 1000)


		// if (deviceUtil.isWeChatBrowser() && deviceUtil.isAndroid) {
		// 	let targetUrl = '/pages/lead-page/lead-page?a=' + httpUtil.getA() +
		// 		'&param=' + userApi.getParam() + '&mobile=' + formData.value.phone + '&openid=' + userApi.getUserId()
		// 	uni.navigateTo({
		// 		url: targetUrl
		// 	})

		// } else 

		// if (!userApi.getUserId() && formData.value.code.length == 0) {
		// 	messageUtil.showLoading()
		// 	smsApi.sendPaySms(formData.value.phone, res => {
		// 		messageUtil.closeLoading()
		// 		messageUtil.showSuccess('验证码发送成功')
		// 		isShowSmsConfirm.value = true
		// 	})
		// } else {

		let params = {
			a: httpUtil.getA(),
			mobile: formData.value.phone,
			proCode: 'LH2502',
			type: 2, // 1-首周0.01元，2-首周30元
		}
		if (userApi.getUserId()) {
			params.openid = userApi.getUserId()
		}
		if (formData.value.code) {
			params.captcha = formData.value.code
		}
		if (paramApi.getParam()) {
			params.param = paramApi.getParam()
		}
		if (!deviceUtil.isWeChatBrowser() && !deviceUtil.isAliBrowser()) {
			params.env = 'wxh5'
		}
		// todo 如果有新增页面把下面这个注释掉
		// if(deviceUtil.isWeChatBrowser()){
		// 	params.env = 'wxh5'
		// }

		userApi.setMobile(formData.value.phone)
		messageUtil.showLoading()
		// https://console-docs.apipost.cn/preview/d6950e962940a169/ea5c94695c40d0d5?target_id=87209fc6-5b30-4c2f-8445-6c2b75673b1a
		httpUtil.post('/api/xmly/api_order', params, res => {
			messageUtil.closeLoading()
			formData.value.isSubmit = true
			window.location.href = res.data.payInfo
		})
		// }
		// uni.navigateTo({
		// 	url: '/pages/orderConfirm/orderConfirm?mobile=' + formData.value.phone
		// })
	}


	const inputPhone = () => {
		if (formData.value.phone.length == 11) {
			// formData.value.isAgreement = true;
		}
	}

	const timeData = ref({
		lastTime: 0,
		hour: 23,
		minute: 59,
		second: 59,
	});

	const initShowTimeMethod = () => {
		let lastTime = new Date();
		lastTime.setHours(23);
		lastTime.setMinutes(59);
		lastTime.setSeconds(59);
		timeData.value.lastTime = lastTime.getTime();
		setInterval(() => {
			showTimeMethod();
		}, 1000);
	}

	const showTimeMethod = () => {
		var time_now = new Date(); // 获取当前时间
		time_now = time_now.getTime();
		var time_distance = timeData.value.lastTime - time_now; // 结束时间减去当前时间
		var int_day, int_hour, int_minute, int_second;
		if (time_distance >= 0) {
			// 天时分秒换算
			int_day = Math.floor(time_distance / 86400000)
			time_distance -= int_day * 86400000;
			int_hour = Math.floor(time_distance / 3600000)
			time_distance -= int_hour * 3600000;
			int_minute = Math.floor(time_distance / 60000)
			time_distance -= int_minute * 60000;
			int_second = Math.floor(time_distance / 1000)

			// 时分秒为单数时、前面加零站位
			if (int_hour < 10)
				int_hour = "0" + int_hour;
			if (int_minute < 10)
				int_minute = "0" + int_minute;
			if (int_second < 10)
				int_second = "0" + int_second;

			// 显示时间
			// time_d.innerHTML = int_day;
			timeData.value.hour = int_hour;
			timeData.value.minute = int_minute;
			timeData.value.second = int_second;
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.form-box {
		// top: 91vw;
		// position: absolute;
		width: 100%;
		padding: 0 0 0 0;
		margin-top: 30rpx;
		// >view {
		// 	padding: 1.5rem 0 0.8rem;
		// 	background-size: 100% 100%;
		// }

	}

	.mobile-swiper {
		width: 94%;
		margin: -130rpx auto 24rpx;
		height: 90rpx;
		background: #FC342D;
		border-radius: 9rpx;
		padding: 24rpx 34rpx;
		box-sizing: border-box;
		position: relative;

		.swiper-item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFF0CD;

		}
	}

	.time-download {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 42rpx;
		position: relative;

		.icon {
			width: 39rpx;
			height: auto;
			display: block;
		}

		.title {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			margin: 0 17rpx;

			// >view {
			// 	border-bottom: solid 0.8rem #ffed8b;
			// 	display: inline-block;
			// 	height: 2.1rem;
			// }
		}

		.time-box {

			display: flex;
			align-items: center;

			.box {
				width: 46rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: linear-gradient(0deg, #FAE4A8, #FBF5DD);
				border-radius: 5rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #FA514A;
				text-align: center;
			}

			.split {
				height: 46rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				margin: 0 7rpx;
				display: flex;
				align-items: center;
			}

		}
	}


	.input-box {
		width: 90%;
		// height: 80rpx;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50rpx;
		border: 2px solid #FA514A;

		.icon-box {
			margin: 0 0 0 32rpx;

			.icon {
				width: 57rpx;
				height: auto;
				display: block;
			}
		}

		.split {
			width: 1rpx;
			height: 52rpx;
			background: #ABABAB;
			margin: 0 14rpx;
		}

		text {
			font-size: .8rem;
			color: #000;
			text-align: right;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			letter-spacing: .1rem;
		}

		.input {
			flex-grow: 1;
			height: 80rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 45rpx;
			letter-spacing: 3rpx;
			color: black;
			padding-left: 30rpx;

			&::-webkit-input-placeholder,
			&::-ms-input-placeholder {
				color: #4f4c45;
				font-size: 45rpx;
			}

			&::-webkit-input-placeholder {
				color: #4f4c45;
				font-size: 45rpx;
			}

			&::-moz-placeholder {
				color: #4f4c45;
				font-size: 45rpx;
			}

		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #bc5058;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #FC5A5A;
			margin-right: 20rpx;
		}
	}

	.clauze {
		width: 90%;
		font-size: 20rpx;
		margin: 31rpx auto 0;
		text-align: justify;
		padding: 0 0 35rpx 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;


		.clauze-txt {
			line-height: 30rpx;
		}

		.uni-checkbox-input {
			border-radius: 100%;
			background-color: none;
		}

		.uni-checkbox-wrapper {
			width: 22rpx;
			height: 22rpx;
		}

		.text {
			letter-spacing: 2rpx;
			font-size: 20rpx;
			color: #fff;
		}

		.tip-color {
			color: #FEE6B6;
			font-size: 20rpx;
		}
	}

	// ::v-deep(.van-checkbox__text) {
	// 	color: #FFFFFF;
	// 	font-size: .8rem;
	// }

	.submit {
		width: 90%;
		margin: 35rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			width: 670rpx;
			animation: butChange 1s infinite;
		}
	}
</style>